<!--
 * @Author       : archer
 * @Date         : 2021-06-30 15:15:48
 * @LastEditors  : archer
 * @LastEditTime : 2021-07-22 16:45:46
 * @Description  : 描述
-->
<template>
  <a-modal
    :centered="true"
    :title="modalTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    :class="{ isFooter: !isFooter, removePadding: removePadding }"
    @cancel="handleCancel"
    @ok="handleOk"
    :width="width"
    :maskClosable="false"
  >
    <component
      :ref="refName"
      :rowData="rowData"
      @close-modal="closeModal"
      :is="operateType"
      v-if="visible"
    ></component>
  </a-modal>
</template>
<script>
  import wechat from './modalForm/wechat.vue'

  export default {
    name: 'TableEdit',
    components: {
      wechat,
    },

    data() {
      return {
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        operateType: '',
        modalTitle: '',
        isFooter: null,
        rowData: null,
        refName: null,
        width: 800,
        removePadding: false, // 去除.ant-modal-body的padding
      }
    },
    mounted() {
      console.log(this.selectedRowKeys)
    },
    methods: {
      showModal(operateType, rowData, isFooter) {
        this.operateType = operateType
        this.isFooter = isFooter
        this.rowData = rowData
        console.log(operateType, rowData, isFooter)
        this.refName = operateType
        switch (operateType) {
          case 'wechat':
            this.width = 440
            break
          default:
            break
        }
        this.visible = true
      },
      handleOk() {
        // 处理form
        this.$refs[this.refName].onSubmit(this.rowData, this.visible)
      },
      handleCancel() {
        try {
          this.visible = this.$refs[this.refName].resetForm()
        } catch (error) {
          // 没有resetForm方法
          this.visible = false
        }
      },
      closeModal() {
        this.visible = false
        this.reloadTableList()
      },
      reloadTableList() {
        this.$emit('reload-table-list')
      },
    },
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal-body {
    max-height: 600px;
    overflow-y: scroll;
  }
</style>
